import React, { useEffect, useState } from 'react';
import { Popconfirm, Radio, Select, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import { Drawer } from 'antd';
import instance from '../../../api/request';
import styles from '../css/o.module.css'
import {
  PlusOutlined,
  DeleteOutlined,
  PlayCircleOutlined,
  PauseCircleOutlined,

} from '@ant-design/icons';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}



function oo() {
  const [data, setdata] = useState([])
  
  const [count, setcount] = useState(0)
  const [page, setpage] = useState(1)
  const [pageSize, setpageSize] = useState(10)
  const getdata = () => {
    instance.get('/api/article/list', {
      params: {
        page: page,
        pageSize: pageSize
      }
    }).then(res => {
      setdata(res.data.rows)
      setcount(res.data.count)

    })
  }
  useEffect(() => {
    getdata()
  }, [page, pageSize])
  // 分页
  const change = (page, pageSize) => {
    setpage(page)
    setpageSize(pageSize)
  }
  // 搜索
  const { Search } = Input;
  const onSearch = (value) => {
    instance.get('/api/article/list', {
      params: {

        keyword: value,//搜索标题


      }
    }).then(res => {
      setdata(res.data.rows)
    })
  };

  // 新增
  const [open, setOpen] = useState(false);
  const [title1, settitle1] = useState('')
  const [form] = Form.useForm()
  const add = () => {
    setOpen(true);
    settitle1('新增')
    form.resetFields()
  };

  const onClose = () => {
    setOpen(false);
  };

  const onFinish = (values) => {
    console.log('Success:', values);
    instance.post('/api/article', {
      "title": values.title,//文章标题
      "content": values.content,//文章内容
      "tagList": ["HTTP"],//标签  array[string]
      "categoryList": ["HTTP"],//分类  array[string]
      "authorId": 47529555//用户id 暂时写死47529555 登陆成功后返回的用户信息

    }).then(res => {
      alert('新增成功')
      setOpen(false)
      getdata()
    })
  };
  // 二次删除

  const confirm = (record) => {
    console.log(record);
    setdata((prev) => prev.filter((item) => item.id !== record.id))
    message.success('Click on Yes');
  };

  const cancel = (e) => {
    console.log(e);
    message.error('Click on No');
  };
  // 批量删除
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,

    onChange: onSelectChange,
  };
  const plsc = () => {
    setdata(data.filter((item) => !selectedRowKeys.includes(item.id)))
  }
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '用户名',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '昵称',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '性别',
      dataIndex: 'viewCount',
      key: 'viewCount',
    },
    {
      title: '手机号',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '邮箱',
      dataIndex: 'yx',
      key: 'yx',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {

            return (
              <Tag key={tag.name}>
                {tag.name.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button color="purple" variant="outlined">
            编辑
          </Button>
          <Popconfirm
            title="Delete the task"
            description="确认删除吗"
            onConfirm={() => confirm(record)}
            onCancel={cancel}
            okText="确认"
            cancelText="取消"
          >
            <Button color="pink" variant="outlined">
              删除
            </Button>
          </Popconfirm>


        </Space>
      ),
    },
  ];
  return (
    <div>

      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}


        autoComplete="off"
      >
        <div className={styles.box}>
          用户名:<Search className={styles.box1} placeholder="请输入用户名" onSearch={onSearch} style={{ width: 200 }} />
          性别:<Search className={styles.box2} placeholder="请输入用户名" onSearch={onSearch} style={{ width: 200 }} />
          <br />
          昵称:<Search placeholder="请输入用户名" onSearch={onSearch} style={{ width: 200 }} />
          手机号:<Search placeholder="请输入用户名" onSearch={onSearch} style={{ width: 200 }} />
          <br />
          邮箱:<Search placeholder="请输入用户名" onSearch={onSearch} style={{ width: 200 }} />
          用户状态:<Search placeholder="请输入用户名" onSearch={onSearch} style={{ width: 200 }} />

        </div>

      </Form>
      <h3>用户列表</h3>
      <Button color="purple" variant="outlined" onClick={add} style={{ marginLeft: 488 }}>
        <PlusOutlined />新增
      </Button>
      <Button color="pink" variant="outlined" onClick={plsc}>
        <DeleteOutlined />批量删除
      </Button>
      <Button variant="outlined">
        <PlayCircleOutlined />刷新
      </Button>
      <Button variant="outlined">
        <PauseCircleOutlined />列设置
      </Button>
      <Drawer
        title={title1}
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >

        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}

          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="title"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <div>
            <h3>性别</h3>
            <Radio>男</Radio>
            <Radio>女</Radio>
          </div>


          <Form.Item
            label="昵称"
            name="content"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>



          <Form.Item
            label="手机号"
            name="createdAt"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="邮箱"
            name="yx"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>


          <div>
            <h3>用户状态</h3>
            <Radio>启用</Radio>
            <Radio>禁用</Radio>
          </div>

          <Form.Item
            label="用户角色"
            name="js"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              确认
            </Button>
            <Button htmlType="submit">
              取消
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    
      <Table<DataType> columns={columns} dataSource={data}
        rowSelection={rowSelection}
        rowKey={'id'}
        pagination={
          {
            total: count,
            showSizeChanger: true,
            showQuickJumper: true,
           
            showTotal: (total) => `Total ${total} items`,
            onChange: change

          }
        }


      />
    </div>
  )
}

export default oo